<template>
  <div class="member">

    <Breadcrumb>
      <BreadcrumbItem>会员列表</BreadcrumbItem>
    </Breadcrumb>

    <Table :columns="th" :data="td"></Table>
    <div class="page" v-if="total > page_size"><Page :total="total" :page-size="page_size" v-on:on-change="pageChange"></Page></div>

    <!--S宝藏奖品列表-->
    <Drawer title="奖品列表" width="400" v-model="bz_show">
      <span v-if="bz_list.length > 0">
        <Card style="margin-bottom: 10px;" v-for="item in bz_list">
          <dl class="bz-list" v-if="type < 3">
            <dt><img :src="item.icon" /></dt>
            <dd>{{item.name}}</dd>
            <dd>价值:￥{{item.money}}</dd>
            <dd>数量:{{item.number}}</dd>
          </dl>
          <dl class="bz-list" v-else>
            <template v-if="item.store_id != '0'">
              <dt><img :src="item.logo" /></dt>
              <dd>门店:{{item.store_name}}</dd>
              <dd>{{item.name}}</dd>
              <dd>{{getType(item.type)}}</dd>
              <dd>数量:{{item.number}} 已核销:{{item.use_number}}</dd>
            </template>
            <template v-else>
              <dt><img :src="item.icon" /></dt>
              <dd>{{item.name}}</dd>
              <dd>数量:{{item.number}} 已核销:{{item.use_number}}</dd>
              <dd>{{item.time}} <span v-if="item.expires">已过期</span></dd>
            </template>
          </dl>
        </Card>
      </span>
      <h4 style="color:#ccc;text-align: center;" v-else>暂无数据</h4>
    </Drawer>
    <!--E宝藏奖品列表-->

  </div>
</template>

<script>
import store from "../../store.js";
export default {
  name: 'home',
  data(){
    return {
      //--公共--
      session:{},  //登录信息
      //--参数--
      activity_id:0,  //活动id
      uid:0,  //操作的uid
      //--表格--
      th:[
        {
          title:'uid',
          key:'uid'
        },
        {
          title:'用户昵称',
          key:'name'
        },
        {
          title:'头像',
          key:'header',
          render:(h,params)=>{
            return h('img',{
              attrs:{
                src:params.row.header
              },
              style:{
                width:'50px',
                height:'50px',
                verticalAlign:'middle'
              }
            })
          }
        },
        {
          title:'可兑换余额',
          key:'balance'
        },
        {
          title:'虚拟奖励',
          key:'bz-list',
          render:(h,params)=>{
            return h('Button',{
              props: {
                size: 'small',
                type:'primary'
              },
              on:{
                click:()=>{
                  this.type = 1;
                  this.uid = params.row.uid;
                  this.showHideList();
                }
              }
            },'虚拟奖励')
          }
        },
        {
          title:'实物奖励',
          key:'entity-list',
          render:(h,params)=>{
            return h('Button',{
              props: {
                size: 'small',
                type:'primary'
              },
              on:{
                click:()=>{
                  this.type = 2;
                  this.uid = params.row.uid;
                  this.showHideList();
                }
              }
            },'实物奖励')
          }
        },
        {
          title:'卡券列表',
          key:'coupon-list',
          render:(h,params)=>{
            return h('Button',{
              props: {
                size: 'small',
                type:'primary'
              },
              on:{
                click:()=>{
                  this.type = 3;
                  this.uid = params.row.uid;
                  this.showHideList();
                }
              }
            },'卡券列表')
          }
        }
      ],
      td:[],
      //--分页--
      page:0,
      total:0,
      page_size:10,
      //--奖品列表--
      bz_show:false,  //是否显示宝藏列表
      bz_list:[],   //宝藏列表
      type:1   //宝藏的类型type 1=虚拟宝藏 2=实物奖励
    }
  },
  created(){
    this.activity_id = sysinfo.activity_id;
    this.getTotal();
    this.list();
  },
  methods:{
    //会员列表
    list(){
      Axios.post(sysinfo.url,Qs.stringify({
          pages:'activity',
          doing:'memberList',
          activity_id:this.activity_id,
          limit:[this.page*this.page_size,this.page_size]
      }))
              .then((res)=>{
                if(res.data.status == 'success'){
                  this.td = res.data.data;
                }else{
                  this.td = [];
                }
              })
              .catch(error=>console.log(error));
    },
    //列表总数
    getTotal(){
      Axios.post(sysinfo.url,Qs.stringify({
        pages:'activity',
        doing:'memberTotal',
        activity_id:this.activity_id
      }))
              .then((res)=>{
                if(res.data.status == 'success'){
                  this.total = parseInt(res.data.data);
                }
              })
              .catch(error=>console.log(error));
    },
    pageChange(page){
      this.page = page-1;
      this.list();
    },
    //显示隐藏实物奖励列表
    showHideList(){
      if(this.bz_show){
        this.bz_show = false;
      }else{
        this.bz_show = true;
        this.bzList();
      }
    },
    //用户的宝藏列表
    bzList(){
      if(this.type == 3){
        Axios.post(sysinfo.url,Qs.stringify({
          pages:'couponSnapshot',
          doing:'getCouponList',
          uid:this.uid,
          activity_id:this.activity_id,
          type:'qb',
          store:true,
        }))
                .then((res)=>{
                  console.log(res.data);
                  if(res.data.status == 'success'){
                    this.bz_list = res.data.data;
                  }else{
                    this.bz_list = [];
                  }
                })
                .catch(error=>console.log(error));
      }else{
        Axios.post(sysinfo.url,Qs.stringify({
          pages:'Activity',
          doing:'memberTreasure',
          uid:this.uid,
          activity_id:this.activity_id,
          type:this.type
        }))
                .then((res)=>{
                  if(res.data.status == 'success'){
                    this.bz_list = res.data.data;
                  }else{
                    this.bz_list = [];
                  }
                })
                .catch(error=>console.log(error));
      }
    },
    //返回类型type
    getType(type){
      for(let i=0;i<store.state.coupon_classify.length;i++){
        if(store.state.coupon_classify[i].value == type){
          return store.state.coupon_classify[i].text;
        }
      }
    }
  }
}
</script>

<style scoped>
  .member{
    padding:10px;
  }
  .page{
    margin-top:10px;
  }
  dl.bz-list{
    overflow: hidden;
  }
  dl.bz-list dt img{
    float:left;
    width:80px;
    height:80px;
    object-fit: cover;
    border:1px solid #ccc;
    box-sizing: border-box;
  }
  dl.bz-list dd{
    float:right;
    width:230px;
  }
</style>
